<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水波纹加载动画</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="app">
      <div class="waterbox53">
        <div class="loadwave53"></div>
      </div>
    </div>

    <!-- 1、先画出外形圆形边框 .waterbox53。并且限制内容溢出 overflow: hidden;。 -->
    <!-- 2、然后定义水波背景层 .loadwave53 ，定义水波的颜色背景 background: blue; ；
      然后利用伪元素 :before 和 :after 创建两个圆角矩形，并且让其层级在上 z-index: 5; 形成遮挡，
      然后设置不同的圆角值 border-radius: xx ；
      再分别给两个伪元素设置不同的背景 background: #ffffff; 和 background: rgb(255,255,255,0.5); ，
      形成视觉上一个比较立体的水波纹。 -->
    <!-- 3、最后给两个伪元素分别设置两个不同的动画，一是让其伪元素旋转360°，形成视觉上一个水波纹在晃动的效果；
      然后再让伪元素从底部缓慢上升，形成水波纹在不断上升的效果。 -->
  </body>
</html>
